<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="牌阵"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="p-30" ref="downloadRef" id="containert">
					<view class="box-card-page">
						<view class="box-card bg-cover flex justify-center">
							<view class="card-title text-center">{{cardDetail.name}}</view>
						</view>
						<view class="card-list flex justify-around p-20" v-if="cardList.length">
							<view class="flex flex-col justify-center items-center" v-for="(item, idx) in cardList" :key="idx">
								<image :src="item.tarot.front" mode="widthFix" v-if="item.dir == 0"></image>
								<image :src="item.tarot.back" mode="widthFix" v-else></image>
								<!-- <text class="mt-10">{{item.tarot.name}}</text> -->
							</view>
						</view>
						<view class="card-detail mb-20">
							<view class="box-lay">
								<view class="flex justify-between items-center pt-20 pb-20">
									<view class="flex items-center">
										<text class="ml-10 font-bold text-\[\#333333\]">牌阵介绍</text>
									</view>
									<view class="mr-20" @click="canvasToImage.getImage">保存图片</view>
								</view>
								<view class="card-dess p-20">{{cardDetail.dess}}</view>
							</view>
						</view>
						<view class="box-supplement mb-20" v-if="cardList.length">
							<view class="title flex justify-center items-center">
								<text>关键词提示</text>
							</view>
							<view class="contents">
								<view class="key-word mb-20 flex items-center" v-for="(item, idx) in cardList" :key="idx">
									<view class="card-name">{{item.tarot.name}}</view>
									<view class="card-key flex-1 flex flex-wrap">
										<view class="item-key" v-for="(key, index) in item.tarot.kword.split('、')"
											:style="keyStyle[Math.floor(Math.random() * 5)]" :key="index">{{key}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<spread1 class="mb-20 mt-20" />
					<spread2 class="mb-20" />
					<spread3 class="mb-20" />
					<!-- <spread4 class="mb-20" /> -->
					<spread5 class="mb-20" />
					<spread6 class="mb-20" />
					<spread7 class="mb-20" />
					<spread8 class="mb-20" />
					<spread9 class="mb-20" />
					<spread10 class="mb-20" />
					<spread11 class="mb-20" />
					<spread12 class="mb-20" />
					<spread13 class="mb-20" />
					<spread14 class="mb-20" />
					<spread15 class="mb-20" />
					<spread16 />
				</view>
			</scroll-view>
		</view>
		<PreviewImgVue v-model="imgShow" :url="imgUrl"></PreviewImgVue>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import testApi from '@/apis/apiList/testApi'
	import userApi from '@/apis/apiList/userApi';
	import communityApi from '@/apis/apiList/communityApi';
	import html2canvas from 'html2canvas';
	import PreviewImgVue from '@/components/PreviewImg.vue';

	import spread1 from './spread/spread1.vue';
	import spread2 from './spread/spread2.vue';
	import spread3 from './spread/spread3.vue';
	import spread4 from './spread/spread4.vue';
	import spread5 from './spread/spread5.vue';
	import spread6 from './spread/spread6.vue';
	import spread7 from './spread/spread7.vue';
	import spread8 from './spread/spread8.vue';
	import spread9 from './spread/spread9.vue';
	import spread10 from './spread/spread10.vue';
	import spread11 from './spread/spread11.vue';
	import spread12 from './spread/spread12.vue';
	import spread13 from './spread/spread13.vue';
	import spread14 from './spread/spread14.vue';
	import spread15 from './spread/spread15.vue';
	import spread16 from './spread/spread16.vue';

	const id = ref('')
	const tarotId = ref('')
	const userId = ref('')
	const user = ref({})
	const cardDetail = ref({})
	const describe = ref('')
	const cardList = ref([])
	const keyStyle = ref([{
		background: 'linear-gradient( 90deg, rgba(204, 204, 255, 0.26) 0%, rgba(117, 185, 255, 0.26) 100%)',
		color: 'rgba(106, 135, 180, 1)'
	}, {
		background: 'linear-gradient( 90deg, rgba(159, 166, 255, 0.26) 0%, rgba(181, 117, 255, 0.26) 100%)',
		color: 'rgba(148, 124, 201, 1)'
	}, {
		background: 'linear-gradient( 90deg, rgba(255, 190, 190, 0.26) 0%, rgba(255, 117, 181, 0.26) 100%)',
		color: 'rgba(204, 134, 176, 1)'
	}, {
		background: 'linear-gradient( 90deg, rgba(255, 215, 49, 0.26) 0%, rgba(255, 186, 117, 0.26) 100%)',
		color: 'rgba(160, 137, 108, 1)'
	}, {
		background: 'linear-gradient( 90deg, rgba(211, 162, 255, 0.26) 0%, rgba(202, 117, 255, 0.26) 100%)',
		color: 'rgba(170, 131, 196, 1)'
	}])
	const downloadRef = ref(null)
	const imgShow = ref(false)
	const imgUrl = ref('')

	onLoad((option) => {
		id.value = option.id;
		tarotId.value = option.tarotId;
		userId.value = uni.getStorageSync('user').id
		queryMemberInfo()
	})

	onShow(() => {
		getDetail();
		getCardDetail();
	})
	const generateImage = () => {
		uni.showLoading({
			title: '图片保存中'
		})
		html2canvas(downloadRef.value.$el, {
			scale: 1,
			useCORS: true,
		}).then(canvas => {
			const img = canvas.toDataURL('image/png');
			console.log(img)
			imgUrl.value = img
			imgShow.value = true
			uni.hideLoading()
			uni.downloadFile({
				url: img,
				success: (res) => {
					if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (resp) => {
								console.log(resp);
								uni.showToast({
									title: '保存到相册！',
									icon: 'none'
								})
							}
						})
					}
				}
			})
		}).catch((res) => {
			console.log(res)
			uni.hideLoading()
		});
		uni.hideLoading()
		console.log(1231231)
	}

	const getCardDetail = async () => {
		const opt = {
			"id": tarotId.value
		}
		await communityApi.membergetDrawCardsByid(opt).then(res => {
			cardList.value = res.data.cardlist
		})
	}

	const getDetail = () => {
		testApi.getDeckInfoByid({
			"id": id.value
		}).then((res) => {
			console.log(res);
			cardDetail.value = res.data
		})
	}

	// 获取个人信息
	const queryMemberInfo = () => {
		userApi.queryMemberInfo({
			id: userId.value
		}).then(res => {
			user.value = res.data
			console.log('用户信息', user.value);
		})
	}
</script>
<script module="canvasToImage" lang="renderjs">
	import html2canvas from 'html2canvas';
	export default {
		data() {
			return {}
		},
		methods: {
			getImage(event, ownerInstance) {
				//containert为需要操作的dom节点，也就是定义的id值
				var dom = document.getElementById('containert');
				// uni.showLoading({
				// 	title: '图片保存中'
				// })
				html2canvas(dom, {
					scale: 1,
					allowTaint: true,
					useCORS: true,
				}).then(canvas => {
					const img = canvas.toDataURL('image/png');
					console.log(img)
					// imgUrl.value = img
					// imgShow.value = true
					uni.hideLoading()
					uni.downloadFile({
						url: img,
						success: (res) => {
							if (res.statusCode === 200) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: (resp) => {
										console.log(resp);
										uni.showToast({
											title: '保存到相册！',
											icon: 'none'
										})
									}
								})
							}
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box-card-page {
		background: linear-gradient(180deg, #F0F9FF 0%, #FFFFFF 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 24rpx 28rpx;

		.box-card {
			height: 132rpx;

			.card-title {
				background: url(/static/test/bg_card_title.png) no-repeat;
				background-size: cover;
				width: 552rpx;
				height: 132rpx;
				font-weight: 500;
				font-size: 36rpx;
				color: #1B2043;
				line-height: 100rpx;
			}
		}

		.card-list {
			image {
				width: 180rpx;
			}
		}

		.card-detail {
			background: linear-gradient(180deg, rgba(178, 185, 247, 0.22) 0%, rgba(181, 188, 247, 0.22) 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 20rpx 20rpx 20rpx 18rpx;

			.box-lay {
				background: url(/static/test/bg_part.png) left top no-repeat;
				background-size: contain;

				text {
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 38rpx;
				}

				.card-dess {
					background: rgba(255, 255, 255, 0.4);
					border-radius: 0 0 10rpx 10rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #273A3F;
					line-height: 36rpx;
				}
			}
		}

		.box-supplement {
			background: linear-gradient(180deg, #E9EDFD 0%, #F3F5FE 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			overflow: hidden;

			.title {
				position: relative;
				height: 80rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #1B2043;
				line-height: 56rpx;
				background: url(/static/test/bg_title.png) no-repeat;
				background-size: cover;
			}

			.contents {
				padding: 20rpx 32rpx;

				.key-word {
					.card-name {
						width: 150rpx;
						height: 70rpx;
						background: linear-gradient(90deg, #D5CEFF 0%, #6BB6FF 100%);
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						font-weight: 500;
						font-size: 30rpx;
						color: #1E2976;
						line-height: 70rpx;
						text-align: center;
					}

					.card-key {
						margin-left: 32rpx;
						border-bottom: 2rpx solid #DCE0EF;

						.item-key {
							margin-bottom: 16rpx;
							padding: 12rpx 20rpx 14rpx 16rpx;
							border-radius: 14rpx;
							margin-right: 18rpx;
							font-weight: 500;
							font-size: 24rpx;
							line-height: 48rpx;
						}
					}

					&:last-child {
						.card-key {
							border-bottom: none;
						}
					}
				}
			}
		}
	}

	.val {
		text-align: right;
	}
</style>